<template>
	<view class="card">
		<!-- AID: 20160132
		Href: "/detail/20160132"
		NewTitle: "第14集(完结)"
		PicSmall: "https://cdn.aqdstatic.com:966/age/20160132.jpg"
		Title: "星期一的丰满" -->
		<view class="image-background" @click="cellClick(recommendData)">
			<image :src="recommendData.PicSmall" style="height: 250rpx; width: 100%;" mode="scaleToFill" lazy-load="true"></image>
			<view class="tip-background">
				<text class="cell-tip uni-text-nowrap">[{{recommendData.NewTitle}}]</text>
			</view>
		</view>
		<view class="uni-flex uni-center">
			<text class="cell-title uni-text-nowrap">{{recommendData.Title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"agereccell",
		props:{
			recommendData:Object
		},
		// 定义组件可以触发的自定义事件的选项,可以是一个数组或者对象
		emits:[
			"clickCellItem"
		],
		data() {
			return {
				
			}
		},
		methods: {
			cellClick(item) {
				console.log(item.AID)
				this.$emit("clickCellItem",item.AID)
			}
		}
	}
</script>

<style>
	.card {
		margin-top: 10rpx;
	}
	
	/* 文字覆盖在图片上，子元素的定位要绝对定位，父元素的定位相对定位 */
	.image-background {
		position: relative;
		padding: 5px 15rpx;
		height: 250rpx;
		transition: transform 0.3;
	}
	
	/* 点击后缩放 */
	.image-background:active {
		transform: scale(0.9);
	}
	
	.tip-background {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border: 1rpx solid rgba(0, 0, 0, 0.5);
		border-radius: 6rpx;
	}
	
	.cell-tip {
		font-size: 20rpx;
		color: #fff;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		margin: 0 10rpx;
		max-width: 100rpx;
		
	}
	
	.cell-title {
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		max-width: 150rpx;
	}

</style>
